<DOCTYPEhtml>
    <htmllang="en">

        <head>
            <metacharset="UTF-8">
                <metahttp-equiv="X-UA-Compatible"content="IE=edge">
                    <metaname="viewport"content="width=device-width,initial-scale=1.0">
                        <title>Document</title>
                        <style>
                            * {
                                margin: 0;
                                padding: 0;
                                list-style: none;
                                margin: auto;
                            }

                            nav {
                                width: 840px;
                                height: 70px;
                                margin: 20px auto;
                                border: 1px solid #000;
                            }

                            nav a {
                                box-sizing: border-box;
                                width: 100px;
                                height: 50px;
                                margin: 10px;
                                color: red;
                                line-height: 50px;
                                text-align: center;
                                border: 1px solid #000;
                                float: left;
                                text-decoration: none;
                            }

                            h3 {
                                text-align: center;
                            }

                            h3 a {
                                box-sizing: border-box;
                                width: 100px;
                                height: 50px;
                                margin: 10px;
                                color: red;
                                text-align: center;
                                text-decoration: none;
                            }

                            ul {
                                width: 1200px;
                                margin: 50px auto;
                                border: 1px solid aqua;
                                overflow: hidden;
                            }

                            ul>li {
                                box-sizing: border-box;
                                position: relative;
                                border: 3px solid rgba(112, 178, 40, 0.877);
                                width: 280px;
                                height: 420px;
                                margin: 10px;
                                float: left;
                            }

                            ul li img {
                                display: block;
                                width: 260px;
                                height: 220px;
                                margin: 5px auto;
                            }

                            ul li p {
                                text-align: center;
                                margin: 5px;
                            }

                            ol {
                                border-collapse: collapse;
                            }

                            ol li {
                                float: left;
                                height: 30px;
                                width: 30px;
                                line-height: 30px;
                                text-align: center;
                                border: 1px solid black;

                            }

                            .action {
                                background-color: aqua;
                            }
                        </style>
        </head>
        </head>

        <body>
            <nav>
                <a href="">全部</a>
                <a href="">阅读</a>
                <a href="">情感</a>
                <a href="">连播</a>
                <a href="">校园</a>
                <a href="">音乐</a>
                <a href="">Labs</a>
            </nav>
            <div class="list">
                <ul>

                </ul>
            </div>
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
            <script>
                var list = document.querySelector(".list > ul"); //内容列表
                var nava = document.querySelectorAll("nav > a"); //分类
                var olLi = document.querySelectorAll("ol > li"); //页数

                // 假设一次获取20条
                var limit = 20;
                // 页面初始获取第一页
                var page = 1;
                // 页面初始获取所有分类(全部)
                var tab = 0;
                function listRef() {
                    var url = `/listref?tab=${tab}&page=${page}&limit=${limit}`;
                    fetch(url).then(function (res1) {
                        return res1.json();
                    }).then(function (res) {
                        if (res.success) {
                            //    console.log(res.data); 
                            var str = "";
                            res.data.forEach(item => {
                                // console.log(item);
                                str += `<li>  <img src="${item.img_url} alt=""> 
                                    <h3><a href="/x.html?id=${item.id}">${item.title}</a></h3>
                              <p class="aurthor">作者:${item.author}<span> 观看量:${item.play_time}</span></p >
                                    <p class="labels">${item.labels}</p >
                        <p class="time">上传时间:${item.created_time}</p >
                                </li>`
                            });
                            list.innerHTML = str;
                        }
                    })
                }
                listRef();
                navStyle();

                function navStyle() {
                    for (let i = 0; i < nava.length; i++) {
                        nava[i].classList.remove("action");
                    }
                    nava[tab].classList.add("action")
                }


                for (let i = 0; i < nava.length; i++) {
                    nava[i].onclick = function (e) {
                        e.preventDefault();
                        tab = i;
                        page = 1;
                        listRef();
                        navStyle();
                    }
                }


                for (let k = 0; k < olLi.length; k++) {
                    olLi[k].onclick = function () {
                        page = this.innerHTML;
                        listRef();
                    }
                }
            </script>
        </body>

        </html>